import React from 'react';
import { ProTableProps } from '../index';
import { ActionType, ProColumns } from '@ant-design/pro-table';
import moment from 'moment';
import styles from './index.less';
import { Item } from 'rc-menu';


const renderText = (col: any, data: any): any => {
	let curData: string = ('' + data['' + col.dataIndex]) || '';
	if(col.render && typeof col.render == "function") {
		return col.render(col, data);
	}
	if(col.valueEnum) {
		return curData && col.valueEnum['' + curData]
			? col.valueEnum['' + curData]['text'] 
			: '';
	}
	if(col.valueType == 'dateTime') {
		return curData? moment(+curData).format("YYYY-MM-DD HH:mm:ss"): '';
	}
	return curData && curData != 'undefined' ? curData: '--';
}

const List = <T, U extends object>(
	props: ProTableProps<T, U> 
) => {
	const {
		dataSource,
		columns
	} = props;
	let columnKeys: ProColumns[] = [], titleKey: ProColumns = columns[0];
	columns.map((el: any) => {
		if(!el.hide) {
			columnKeys.push(el);
			el.isTitle && (titleKey = el);  
		}
	})
	
	/** renderList 渲染列表 */
	const renderList = (el: any) => {
		return (<>
			<h2>{[el[titleKey.dataIndex]]}</h2>
			{columnKeys.map((col: any) => {
				if(col.valueType != 'option' && col.dataIndex != 'action')  
					return col.dataIndex != titleKey['dataIndex']
						? (<p>
								<span className={styles.fl}>{col.title}:</span>
								<span className={styles.fr}>{renderText(col, el)}</span>
							</p>)
						: null;
				else 
					return (<div className={styles.action}>
						{(col.valueType == 'option' || col.dataIndex == 'action') && col.render(col, el)}
					</div>)
			})}
			
		</>)
	}

	return (<div>
		{dataSource 
			&& dataSource.length > 0 
			&& dataSource.map((el: any) => 
				<div className={styles.mobileItem}>
					{renderList(el)}
				</div>
			)}
	</div>)
};

export default List;
